<template>
  <div class="index">
    <!-- 认购收益 -->
    <div class="circle mb-15">
      <div class="rel">
        <img style="width: 100%" src="../assets/img/index/circle.png" />

        <div class="full flex flex-center lh-2" style="position: absolute">
          <div class="ta-center">
            <!-- 认购收益 -->
            <div class="inline bcl-mask pl-15 pr-15">{{ $t('认购收益') }}</div>
            <div class="fz-20 fw-bold">{{ totalAmount?.toFixed(6) || 0 }}</div>

            <!-- 日收益率 -->
            <div
              class="flex flex-cc bcl-mask pl-15 pr-15 mb-15"
              style="border-radius: 100px"
            >
              <div>{{ $t('日收益率') }}</div>
              <div class="ml-5 mr-5">+4‰</div>
              <img style="width: 12px" src="../assets/img/index/triangle.png" />
            </div>

            <!-- 我的奖励 -->
            <van-button
              style="height: 25px"
              plain
              @click="emit('changeTab', 3)"
            >
              <span>{{ $t('我的奖励') }}</span>
              <van-icon name="arrow"></van-icon>
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 总认购收益数 -->
    <div class="container mb-15">
      <div class="ta-center fz-20 cl-second mb-15">{{ $t('总认购数') }}</div>
      <div class="ta-center fz-20 mb-15">
        {{ totalPledge?.toFixed(6) || 0 }} CTIN
      </div>

      <!-- 按钮 -->
      <div class="flex flex-rb pl-50 pr-50 mb-40">
        <van-button
          style="width: 80px"
          type="primary"
          @click="emit('changeTab', 0)"
        >
          <span class="cl-black">{{ $t('认购收益') }}</span>
        </van-button>

        <van-button
          style="width: 80px"
          type="primary"
          plain
          @click="emit('changeTab', 4)"
        >
          <span>{{ $t('明细') }}</span>
        </van-button>
      </div>

      <!-- 数据 -->
      <div class="flex flex-rb ta-center pl-50 pr-50">
        <div class="flex-1 bd-right" style="border-color: #2d3245">
          <div class="cl-second">{{ $t('每日收益') }}</div>
          <div>{{ totalProfit?.toFixed(6) || 0 }}</div>
        </div>

        <div class="flex-1">
          <div class="cl-second">{{ $t('总收益') }}</div>
          <div>{{ totalAmount?.toFixed(6) || 0 }}</div>
        </div>
      </div>
    </div>

    <!-- 推广中心 -->
    <div class="box mb-25">
      <div class="flex flex-rc">
        <div class="title">{{ $t('推广中心') }}</div>
      </div>

      <div class="ta-center fz-20 mb-10">{{ $t('我的推广链接') }}</div>

      <div class="link bcl-mask rel">
        <div class="hide-1">{{ inviteLink }}</div>

        <van-button type="primary" round @click="copyString(inviteLink)">
          <div class="cl-black">{{ $t('复制') }}</div>
        </van-button>
      </div>
    </div>

    <!-- 图文 -->
    <img
      style="width: 100%"
      :src="getImage(i + 1)"
      v-for="(v, i) in 6"
      :key="i"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { copyString, formatDateTime } from 'js/utils'
import apis from 'js/apis'

const emit = defineEmits(['changeTab'])

// 总认购收益数
const totalPledge = ref(0)

// 总收益
const totalAmount = ref(0)

// 每日收益
const totalProfit = ref(0)

// 邀请链接
const inviteLink = ref(`${location.origin}/#/register?inviteId=${fromAddress}`)

getRecords1()
getRecords2()
getRecords3()

// 获取总认购收益数
async function getRecords1() {
  const params = {
    page: 1,
    limit: 99999,
  }

  const { code, data } = await apis.pledge.getDetails(params)

  if (code === 1) {
    const records = data.data || []

    records.forEach((v) => {
      totalPledge.value += v.amount_all || 0
    })
  }
}

// 获取总收益
async function getRecords2() {
  const params = {
    page: 1,
    limit: 99999,
  }

  const { code, data } = await apis.pledge.getDetails(params)

  if (code === 1) {
    const records = data.data || []

    records.forEach((v) => {
      totalAmount.value += (v.profit_pa || 0) + (v.profit_pb || 0)
    })
  }
}

// 获取每日收益
async function getRecords3() {
  const params = {
    page: 1,
    limit: 99999,
  }

  const { code, data } = await apis.profit.getProfits(params)

  if (code === 1) {
    const records = data.data || []

    records.forEach((v) => {
      const [rowDay] = formatDateTime(v.update_time).split(' ')
      const [today] = formatDateTime(Date.now() / 1000).split(' ')

      if (rowDay === today) {
        totalProfit.value += v.pr || 0
      }
    })
  }
}

function getImage(i) {
  return new URL(
    `../assets/img/intro/d3f93535-0505-4ccf-b8a2-a014ba21ef3a.pdf${
      i < 10 ? '0' + i : i
    }.png`,
    import.meta.url
  ).href
}
</script>

<style lang="scss" scoped>
.index {
  background: url('../assets/img/index/bg.png') no-repeat left top / 100%;
}

.container {
  border-radius: 20px;
  background: url('../assets/img/index/box_1.png') no-repeat left top / 100%;
  overflow: hidden;
}

.link {
  height: 40px;
  line-height: 40px;
  padding: 0 80px 0 15px;
  border-radius: 100px;

  :deep(.van-button) {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40px;
  }
}
</style>
